<template>
  <div>
    <!--
    1. action 必选参数，上传的地址, 此处先传递为空或者#, 防止报错, 后期用自己的上传方案
    2. list-type 文件列表的类型, 此处选择的是以照片墙的形式进行展示
    3. file-list 上传的文件列表, 对象型数组
    4. on-preview
       当你点击+号的时候会自动触发,
       接收一个函数, 会把点击的图片文件作为参数传递
    5. limit	最大允许上传个数
    6. on-remove
       当你点击垃圾篓的时候会自动触发
       会接收一个函数, 函数会有两个参数: file, fileList
       file: 是被删除的那个文件对象
       fileList: 返回最新的文件列表 (结构中的列表, 不是数据中的列表)
    7. http-request
       覆盖默认的上传行为，可以自定义上传的实现
       接收的是一个函数 函数接收一个参数: 对象 (obj.file -- 就是要上传的文件对象)
       一旦配置了自定义上传, 当选择一张图片时, 默认会以本地预览的形式展示图片
       类似于: 	blob:http://localhost:8888/bc04f586-b0c1-48bd-9102-46f7ddf32926
       临时生成一个本地图片用于预览, 增强用户体验
    8. on-change
       文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
       接收的是一个函数 function(file, fileList)
    9. before-upload
       图片文件在上传之前触发, 接收的是一个函数   function(file)
       一般用于校验图片的格式或者图片的大小...
    -->
    <el-upload
      :class="{disabled: isDisabled}"
      action="#"
      :limit="limit"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <el-dialog title="图片预览" :visible="dialogVisible" @close="dialogVisible = false">
      <img :src="dialogImageUrl" style="width: 100%;">
    </el-dialog>

    <!-- <el-progress
      :text-inside="true"
      :stroke-width="26"
      :percentage="percentage"
      style="width: 200px; height: 30px;"
    /> -->
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: 'AKIDgCTVIq9C0YqtgEWZNvEI6ex0oMfiV2JO', // 身份识别ID
  SecretKey: 'tZ0C9qIUQ7ZlhOp0wc2D8nDNIxNXYP3S' // 身份秘钥
})
export default {
  name: 'UploadImage',
  props: {
    // 图片上传的最大数量
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 1. 上传文件列表
      fileList: [
        // { url: 'https://img1.baidu.com/it/u=4216761644,15569246&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
        // { url: 'https://img0.baidu.com/it/u=18497219,172601761&fm=253&fmt=auto&app=138&f=PNG?w=519&h=500' }
      ],
      // 2. 图片预览对话框显示/隐藏
      dialogVisible: false,
      // 3. 用于展示的图片地址,
      dialogImageUrl: '',
      // 4. 控制进度条百分比
      percentage: 0
    }
  },
  computed: {
    isDisabled() {
      return this.fileList.length >= this.limit
    },
    // 是否所有的图片都已经上传完毕
    isUploadAll() {
      return this.fileList.every((item) => {
        return item.status === 'success'
      })
    }
  },
  methods: {
    // 1. 图片预览
    handlePictureCardPreview(file) {
      // console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 2. 删除图片
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      // 数据同步
      // 方式一:
      // this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      // 方式二:
      // 注意: 引用数据类型不能直接赋值, 要深拷贝再赋值(形成独立的数组)
      this.fileList = [...fileList]
    },
    // 3. 自定义图片上传
    /*
     之前发送请求的方式:
     1) 安装axios  yarn add axios
     2) 引入axios  import axios from 'axios'
     3) 创建axios实例
       const http = axios.create({})
     4) 发起请求
       http({
           method: 'get',
           url: '/xxx/xxx'
       })
     */
    handleUpload(obj) {
      // 0. 找到对应的图片文件
      const file = this.fileList.find(item => item.uid === obj.file.uid)

      // 在上传之前, 设置文件的状态为uploading
      file.status = 'uploading'

      // console.log('这里开始上传图片操作', obj.file)
      // 使用腾讯云SDK上传图片文件到存储桶
      cos.putObject({
        Bucket: 'hrsass-90-1312445828', /* 存储桶, 必填字段 */
        Region: 'ap-shanghai', /* 存储桶所在区域, 必填字段 */
        Key: 'hrsass-90' + parseInt(Math.random() * 99999) + obj.file.name, /* 存储在桶里的对象键, 必填字段 */
        StorageClass: 'STANDARD',
        Body: obj.file, // 上传的文件对象
        onProgress: (progressData) => { // 返回文件上传进度信息
          // console.log(JSON.stringify(progressData))
          // this.percentage = parseInt(progressData.percent * 100)
          file.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        // 注意: 此处使用箭头函数, 避免this的指向出现问题
        // console.log(err || data)
        if (err) {
          this.$message.error('图片上传失败')
          return
        }

        // 1. 更新当前上传的对应图片的status为sucess
        // console.log(obj, data)
        // 如果网速太快, 看不到进度效果, 稍作延迟让用户体验更好
        setTimeout(() => {
          file.status = 'success'
        }, 1000)
        // 2. 把本地预览地址更新成图片服务器返回的url地址
        file.url = 'https://' + data.Location
      })
    },
    // 4. 文件上传时触发
    handleChange(file, fileList) {
      // console.log(file, fileList)
      // 同步数据
      this.fileList = [...fileList]
    },
    // 5. 文件上传之前校验
    handleBeforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled{
    ::v-deep{
        .el-upload--picture-card{
            display: none;
        }
    }
}
</style>
